<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录-1112Springboot 17:25</title>
    <script type="text/javascript" src="js1/jquery-3.4.1.min.js"></script>
</head>
<body>
    <h1>用户登录</h1>
    <form id="form-login" action="login" method="post">
        <table>
            <tr>
                <td>用户名</td>
                <td>
                    <input name="username">
                    <span style="color: red" id="span-username"></span>
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td>
                    <input name="password">
                    <span style="color: red" id="span-password"></span>
                </td>
            </tr>
            <tr>
               <td colspan="2">
                   <input type="button" onclick="login()" value="登录">
               </td>
            </tr>
        </table>
    </form>

    <script type="text/javascript">
        function login() {
            // alert("登录")
            $("#span-username").empty();
            $("#span-password").empty();

            //发送ajax请求 局部刷新
            $.ajax({
                /*
                    url:请求提交的地址
                    data:请求参数
                    type：请求类型
                    dataType：当服务器响应时，响应的数据类型 text、xml、json
                    success：当服务器响应成功时的回调函数，函数参数就是服务器响应的json对象
                */
                "url":"/login",
                "data":$("#form-login").serialize(),
                "type":"post",
                "dataType":"json",
                "success":function (json) {
                    if(json.state == 1){
                        alert("登录成功")
                    }else if(json.state == 2){
                        $("#span-username").html("用户不存在")
                    }else {
                        $("#span-password").html("密码错误")
                    }
                }

            });

        }

    </script>



</body>
</html>